.svg_wrap {
  width: 60px;
  height: 60px;
}

.svg_light {
  fill: #989898;
  stroke: #989898;
  transition-duration: 400ms;
  transition-property: stroke, fill;
}

.svg_thin {
  fill: #989898;
  stroke: #989898;
  opacity: 0.5;
  transition: fill 400ms;
}

.mine_eyes {
  transition: transform 400ms;
}

:global(.active) {
  .svg_light {
    fill: #ff4e56;
    stroke: #ff4e56;
  }
  .svg_thin {
    fill: #ffc6cd;
    stroke: #ffc6cd;
  }
  .home_circle {
    :global {
      animation: fadeInRight 400ms ease-out;
    }
  }

  .home_u {
    :global {
      animation: fadeInUp 400ms;
      animation-fill-mode: both;
    }
  }

  .home_line {
    :global {
      animation: slideInLeft 400ms;
      animation-fill-mode: both;
    }
  }

  .home_start {
    :global {
      animation: flash 2000ms infinite;
      animation-fill-mode: both;
    }
  }

  .discover_dots {
    transform-origin: center;
    :global {
      animation: zoomIn 400ms;
      animation-fill-mode: both;
    }
  }

  .discover_ball {
    transform-origin: center;
    animation: discover_in 400ms ease-out;
    animation-fill-mode: both;
  }

  .svg_social {
    transform-origin: center bottom;
    // animation: social_in 400ms;
    :global {
      animation: zoomIn 400ms ease-out;
      animation-fill-mode: both;
    }
  }
  .social_left {
    transform-origin: 50% 60%;
    animation: social_in 400ms ease-out;
    animation-fill-mode: both;
  }
  .mine_eyes {
    transform-origin: center;
    transform: translateX(5px);
  }
}

@keyframes discover_in {
  0% {
    transform: scale(1.3);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes social_in {
  0% {
    transform: rotate(-120deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes eyes_in {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(5px);
  }
}
